import React, { useState } from 'react';
import { Table, Pagination, Button } from 'antd';
import './ZwbTable.css';

const ZwbTable = ({ maxItem = 10, columns, data, colorStyle = 'blue' }) => {
  const [expanded, setExpanded] = useState(false);
  const [pageSize, setPageSize] = useState(10);

  const handleShowMore = () => {
    setExpanded(!expanded);
  };

  const handlePageSizeChange = (current, size) => {
    setPageSize(size);
  };

  const displayData = expanded
    ? data.slice(0, pageSize)
    : data.slice(0, maxItem);
  const showMoreButton = data.length > maxItem;
  const colorClass = `zwb-table-${colorStyle}`;

  return (
    <div className={`zwb-table ${colorClass}`}>
      <Table
        columns={columns}
        dataSource={displayData}
        pagination={false}
      />
      {showMoreButton && (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginTop: 16,
          }}>
          <Button
            className={colorClass}
            onClick={handleShowMore}>
            {expanded ? '收起' : '展开'}
          </Button>
          {expanded && (
            <Pagination
              className={colorClass}
              total={data.length}
              pageSize={pageSize}
              onChange={handlePageSizeChange}
              showSizeChanger
              pageSizeOptions={['10', '20', '30']}
            />
          )}
        </div>
      )}
    </div>
  );
};

export default ZwbTable;
